<template>
    <div id="slider" class="mui-slider">
        <div class="mui-slider-group mui-slider-loop">
            <template v-for="({url, file} , index) in myslides">
                <div v-if="index === 0 || index === slides.length + 1" class="mui-slider-item mui-slider-item-duplicate">
                    <div class="img" :class="{ product : isProduct }" :style="'background-image: url(' + webApiDomain + '/public/uploads/' + file.savepath + file.savename + ');'"></div>
                </div>
                <div v-else class="mui-slider-item">
                    <div class="img" :class="{ product : isProduct }" :style="'background-image: url(' + webApiDomain + '/public/uploads/' + file.savepath + file.savename + ');'"></div>
                </div>
            </template>
        </div>
        <div class="mui-slider-indicator mui-text-center">
            <template v-for="({url} , index) in slides">
                <div v-if="index === 0" class="slg mui-indicator mui-active"></div>
                <div v-else class="slg mui-indicator"></div>
            </template>
        </div>
    </div>
</template>

<script>

import { apiDomain } from 'assets/js/Lib';

export default {
    data() {
        return {
            myslides: []
        }
    },
    components: {

    },
    computed: {
        webApiDomain: function () {
            return apiDomain;
        }
    },
    watch: {
        slides: function () {
            if (this.slides.length > 0) this.myslides = this.slides.slice(0, 1).concat(this.slides.concat(this.slides[0]))
        }
    },
    props: {
        slides: {
            type: Array,
            default: []
        },
        isProduct: {
            type: Boolean,
            default: false
        }
    },
    //实例初始化最之前，无法获取到data里的数据
    beforeCreate() {


    },
    //在挂载开始之前被调用
    beforeMount() {


    },
    mounted() {

    },
    //已成功挂载，相当ready()
    updated() {
        // this.myslides = this.slides.length > 0 ? this.slides.slice(0,1).concat(this.slides.concat(this.slides[0])) : []
        if (this.slides.length > 0) {
            mui('#slider').slider({
                // interval: 5000
            });
        }
    },
    //相关操作事件
    methods: {

    }
}
</script>

<style lang="less">
#slider {
    box-shadow: 0 1px 6px #ccc;
    width: 100%;
    min-height: 4.4rem;

    .mui-slider-item {
        .img {
            height: 4.4rem;
            background: rgba(0, 0, 0, .03);
            background-size: cover !important;
            background-position: center center;
            background-repeat: no-repeat;

            &.product {
                width: 10rem;
                height: 10rem;
            }
        }
    }

    .mui-indicator {
        width: .4733333333rem;
        height: .0633333333rem;
        margin: 0;
        margin-left: .0533333333rem;
        border-radius: 0px;
        box-shadow: 0 0 0 0;
    }
}
</style>
